<template>
	<view @click="chooseImg" class="img-box">
		<image class="img-bg" src="../../static/common/img-border.png" mode=""></image>
		<image class="img" v-show="!show" :src="img" :key="1"></image>
		<image class="img" v-show="show" :src="urlImg" :key="2" mode="aspectFill"></image>
	</view>
</template>

<script>
	import images from "./images.js";
	export default {
		props: {
			value: {
				type: String,
				default: ''
			},
			img: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'img'
			}
		},
		data() {
			return {
				images,
				urlImg: '', //上传后预览图片
				show: false
			}
		},
		watch: {
			value: {
				handler(newValue) {
					// console.log('newValue',newValue);
					// this.urlImg = this.vuex_imgUrl + this.value || ''
					// // this.urlImg = this.value || ''
					// this.urlImg = this.urlImg.replace(this.vuex_imgUrl + this.vuex_imgUrl, this.vuex_imgUrl)
					// if (this.urlImg) {
					// 	this.show = true
					// }
					this.initData()
				}
			}
		},
		created(){
			this.initData()
		},
		methods: {
			// 处理数据
			initData(){
				if(!this.value){return}
				this.urlImg = this.vuex_imgUrl + this.value || ''
				// this.urlImg = this.value || ''
				this.urlImg = this.urlImg.replace(this.vuex_imgUrl + this.vuex_imgUrl, this.vuex_imgUrl)
				if (this.urlImg) {
					this.show = true
				}
			},
			chooseImg() {
				let that = this
				if (this.type == "img") {
					uni.chooseImage({
						count: 1,
						async success(res) {
							uni.uploadFile({
								url: that.vuex_baseUrl + '/common/upload',
								filePath: res.tempFiles[0].path,
								name: 'file',
								success: (uploadFileRes) => {
									let respons = JSON.parse(uploadFileRes.data)
									console.log('respons', respons);
									if (respons.code == 200) {
										that.urlImg = that.vuex_imgUrl + respons.fileName
										that.$emit('upImg', respons.fileName)
										that.$emit('update:value', respons.fileName)
										// that.value = respons.fileName
										that.show = true
									}
								},
								fail(err) {
									console.log('err', err);
								}
							});
						}
					})
				} else if (this.type == "video") {
					uni.chooseVideo({
						sourceType: ['camera', 'album'],
						success: function(res) {
							uni.uploadFile({
								url: that.vuex_baseUrl + '/common/upload',
								filePath: res.tempFiles[0].path,
								name: 'file',
								success: (uploadFileRes) => {
									let respons = JSON.parse(uploadFileRes.data)
									console.log('respons', respons);
									if (respons.code == 200) {
										that.urlImg = that.vuex_imgUrl + respons.fileName
										that.$emit('upImg', respons.fileName)
										that.$emit('update:value', respons.fileName)
										// that.value = respons.fileName
										that.show = true
									}
								},
								fail(err) {
									console.log('err', err);
								}
							});
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img-box {
		width: 100%;
		height: 100%;
		position: relative;

		.img-bg {
			width: 100%;
			height: 100%;
			position: absolute;
		}

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.text_box {
		margin: 30rpx auto 40rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 24rpx;
		font-weight: 500;
		color: #333333;
	}
</style>